<template>
  <div id="app">
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="tab1">
        <img slot="icon" src="../assets/MV.png" />
        Mv
      </mt-tab-item>
      <mt-tab-item id="tab2">
        <img slot="icon" src="../assets/recommend.png" />
        发现
      </mt-tab-item>
      <mt-tab-item id="tab3">
        <img slot="icon" src="../assets/aboutme.png" />
        我
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      selected: "tab1",
    };
  },
  watch: {
    selected: function (val) {
      console.log(this.isbottem)
      switch (val) {
        case "tab1":
          this.$router.push("/index");

          break;
        case "tab2":
          this.$router.push("/Recommend");

          break;
        case "tab3":
          this.$router.push("/AboutMe");

          break;
      }
    },
  },
};
</script>

<style>
#app {
  color: black;
}
</style>